<!-- playground-fold -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample</title>
    <link rel="stylesheet" href="./main.css">
</head>

<body style="background-color: var(--sapBackgroundColor)">
    <!-- playground-fold-end -->

    <ui5-carousel
        cyclic
        items-per-page="S1 M2 L3 XL3"
        arrows-placement="Navigation">
        <ui5-card class="medium">
            <ui5-card-header slot="header" title-text="Activities" subtitle-text="For Today"></ui5-card-header>
            <ui5-timeline>
                <ui5-timeline-item id="test-item" title-text="called" timestamp="1487583000000" icon="phone"
                    name="John Smith" name-clickable=""></ui5-timeline-item>
                <ui5-timeline-item title-text="Weekly Sync - CP Design" timestamp="1517349600000" icon="calendar">MR
                    SOF02 2.43</ui5-timeline-item>
                <ui5-timeline-item title-text="Video Conference Call - UI5" timestamp="1485813600000"
                    icon="calendar">Online meeting</ui5-timeline-item>
            </ui5-timeline>
        </ui5-card>
        <ui5-card class="small">
            <ui5-card-header slot="header" title-text="David Williams" subtitle-text="Sales Manager">
                <img src="../assets/images/avatars/man_avatar_1.png" alt="" slot="avatar">
            </ui5-card-header>
            <ui5-list separators="Inner">
                <ui5-li icon="competitor" icon-end>Personal Development</ui5-li>
                <ui5-li icon="wallet" icon-end>Finance</ui5-li>
                <ui5-li icon="collaborate" icon-end>Communications Skills</ui5-li>
            </ui5-list>
        </ui5-card>
        <ui5-card class="medium">
            <ui5-card-header slot="header" title-text="Team Dolphins" subtitle-text="Direct Reports" status="1 of 2">
                <ui5-icon name="group" slot="avatar"></ui5-icon>
            </ui5-card-header>
            <ui5-list separators="None">
                <ui5-li description="User Researcher">Alain Chevalier
                    <ui5-avatar slot="image" shape="Square">
                        <img src="../assets/images/avatars/man_avatar_1.png" alt="Woman image">
                    </ui5-avatar>
                </ui5-li>
                <ui5-li description="Artist">Monique Legrand
                    <ui5-avatar slot="image" shape="Square">
                        <img src="../assets/images/avatars/woman_avatar_1.png" alt="Woman image">
                    </ui5-avatar>
                </ui5-li>
                <ui5-li description="UX Specialist">Michael Adams
                    <ui5-avatar slot="image" shape="Square">
                        <img src="../assets/images/avatars/woman_avatar_2.png" alt="Woman image">
                    </ui5-avatar>
                </ui5-li>
            </ui5-list>
        </ui5-card>
        <ui5-card class="medium">
            <ui5-card-header slot="header" title-text="Team Bears" subtitle-text="Direct Reports" interactive=""
                status="2 of 2">
                <ui5-icon name="group" slot="avatar"></ui5-icon>
            </ui5-card-header>
            <ui5-list separators="None">
                <ui5-li description="Software Architect">Richard Wilson
                    <ui5-avatar slot="image" shape="Square">
                        <img src="../assets/images/avatars/man_avatar_2.png" alt="Woman image">
                    </ui5-avatar>
                </ui5-li>
                <ui5-li description="Visual Designer">Elena Petrova
                    <ui5-avatar slot="image" shape="Square">
                        <img src="../assets/images/avatars/woman_avatar_3.png" alt="Woman image">
                    </ui5-avatar>
                </ui5-li>
                <ui5-li description="Quality Specialist">John Miller
                    <ui5-avatar slot="image" shape="Square">
                        <img src="../assets/images/avatars/man_avatar_3.png" alt="Woman image">
                    </ui5-avatar>
                </ui5-li>
            </ui5-list>
        </ui5-card>
    </ui5-carousel>
    <!-- playground-fold -->
    <script type="module" src="main.js"></script>
</body>

</html>
<!-- playground-fold-end -->
